<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例：模拟百度搜索</title>
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/temolate.js"></script>
		<script id="itany" type="text/html">
			<ul>
			{{each s as r}}
			<li>{{r}}</li>
			{{/each}}
			</ul>
		</script>
		<script>
			$(function(){
				$("#txtSearch").keyup(function(){
					var keyword=$(this).val();
					var info=$("#info");
					
					$.ajax({
						type:"get",
						url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+keyword,
						dataType:"jsonp",
						jsonp:"cb",
						success:function(data){
							console.log(index+"="+data[index]);
							info.empty();
							if(data.s.length>0){
								var reault=template("itany",data);
								info.html(result).show();
							}
						},
						error:function(){
							alter("亲，出错啦！");
						}
					});
				});
			});
		</script>
		<style>
			#cintents{
				width:400px;
				margin:20px auto;
			}
			#txtSearch{
				width:300px;
			}
			#info{
				width:305px;
				border:1px solid #cc;
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="contents">
			<input type="text" id="txtSearch">
			<input type="button" value="搜索" id="btnSearch">
			<div id="info"></div>
		</div>
	</body>

</html>